<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>有人智造-首件巡检看板</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"></script>-->
  <link rel="icon" href="/static/img/logo.png" type="image/x-icon"> <!-- 链接到favicon.ico文件 -->
  <style>
    body{
      /*background-color: #f5f7fa;*/
      font-size: 20px;
      background: linear-gradient(to bottom right, blue, pink);
      background-image: url("/static/img/017d6a5c513b9ca801213f26c6f65d.png@2o.png");
      height: 700px;
    }
    h1{
      width: 30%;
      margin: 0 auto;
      color: white;
      background: linear-gradient(-45deg, transparent 34px, #134194 0) right,
      linear-gradient(45deg, transparent 34px, #134194 0) left;
      background-size: 50% 100%;
      background-repeat: no-repeat;
      margin-bottom: 20px;
    }
    .return{
      position: fixed;
      top: 10px;
      left:10px;
      width: 50px;
      height: 50px;
    }

    h3{
      width: 100%;
      height: 30px;
      line-height: 30px;
      margin: 0 auto;
      color: white;
      background: linear-gradient(-45deg, transparent 14px, #134194 50px) right;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-bottom: 20px;
      padding-left: 20px;
      font-size: 20px;
    }
    .divTop{
      height: 350px;
      /*background-color: red;*/
      margin-bottom: 20px;
      display: flex;
    }
    .top1{
      width: 15%;
      height: 100%;
      margin-right: 30px;
      /*background-color: #7bd4ce;*/
      border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
      box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
      background: linear-gradient(to bottom right, white, blue);
    }
    .top11{
      width: 100%;
      height: 50px;
      background-color: white;
      border-radius: 50px;
      display: flex;
      margin-top: 50px;
    }
    .top111{
      width: 50%;
      height: 50px;
      border-radius: 50px 0 0 50px;
      /*background-color: red;*/
      text-align: center;
      color: white;
      line-height: 50px;
      font-size: 15px;
      background: linear-gradient(to bottom right, blue, pink);
    }
    .top112{
      width: 50%;
      height: 50px;
      border-radius: 0 50px 50px 0;
      background-color: green;
      text-align: center;
      color: white;
      line-height: 25px;
      font-size: 15px;
      background: linear-gradient(to bottom right,#666aff, #7bd4ce);
    }
    .top2{
      width: 82%;
      height: 100%;
      background-color: #caf2ff;
      border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
      box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
      font-size: 13px;
    }
    table th:nth-child(odd){
      background-color: #2bb9ba;
      color: white;
    }
    table th:nth-child(even){
      background-color:#134094;
      color: white;
    }
    table tr:nth-child(odd){
      background-color: #7bd4ce;
      color: white;
    }
    .container {
      max-width: 2500px;
      /*width: 100%;*/
      /*background-color: red;*/
      height: 290px; /* 设置容器的高度 */
      overflow: auto; /* 启用垂直滚动 */
      padding: 0;
      overflow-y: hidden;
      position: relative; /* 相对定位以容纳滚动内容 */
      /*animation: scroll 10s linear infinite; !* 使用动画滚动 *!*/
    }
    .container1{
      /*width: 100%;*/
      position: absolute; /* 绝对定位 */
      top: 0; /* 初始位置为顶部 */
      /*animation: scroll 10s linear infinite; !* 使用动画滚动 *!*/
      animation-name: scroll;
      /*animation-duration: 800s;*/
      animation-timing-function: linear;
      /*animation-delay: 1s;*/
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-fill-mode: forwards;
    }


    .container2 {
      max-width: 2500px;
      width: 100%;
      /*background-color: red;*/
      height: 200px; /* 设置容器的高度 */
      overflow: auto; /* 启用垂直滚动 */
      padding: 0;
      /*margin-left: 100px;*/
      overflow-y: hidden;
      position: relative; /* 相对定位以容纳滚动内容 */
    }
    .container21{
      width: 100%;
      position: absolute; /* 绝对定位 */
      top: 0; /* 初始位置为顶部 */
      /*animation: scroll 20s linear infinite; !* 使用动画滚动 *!*/
      animation-name: scroll;
      /*animation-duration: 800s;*/
      animation-timing-function: linear;
      /*animation-delay: 1s;*/
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-fill-mode: forwards;
    }
    /* 滚动动画 */
    @keyframes scroll {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(-100%);
      }
    }



    .divBottom{
      height: 500px;
      /*background-color: green;*/
      font-size: 12px;
    }
    .bottom1{
      width: 100%;
      height: 50%;
      /*margin-right: 100px;*/
      background-color: #caf2ff;
      border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
      box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
      margin-bottom: 10px;

    }
    .bottom2{
      width: 100%;
      height: 50%;
      background-color: #caf2ff;
      border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
      box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
    }
    .table1 tr th{
      padding: 0;
      text-align: center;
    }
    .table1 tr td{
      padding: 0;
      /*text-align: center;*/
    }
    .table1{
      margin-top: -15px;
    }
    .return{
      position: fixed;
      top: 10px;
      left:10px;
      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body>
<div style="width: 100%;margin: 0 auto">
    <img src="/static/img/return.png" alt="返回总控台" class="return">
    <h1 style="text-align: center ">首检巡检看板</h1>
    <!--    分为四块，数量一部分，当前待检任务单一部分，今日已检任务单一部分，今日不良数据一部分-->
    <div style="width: 100%;height: 90%; margin-top: 20px;">
      <div class="divTop">
        <div class="top1">
          <h3>检验数量统计</h3>
          <div class="top11">
            <div class="top111">今日首检</div>
            <div class="top112">
              数量：{$data1['count']} <br>
              通过率：{$data1['hg']}%
            </div>
          </div>
          <div class="top11">
            <div class="top111">今日IPQC巡检</div>
            <div class="top112">
              次数：{$data2['count']} <br>
              不良数量：{$data2['NgNum']}
            </div>
          </div>
          <div class="top11">
            <div class="top111">昨日IPQC巡检</div>
            <div class="top112">
              次数：{$data3['count']} <br>
              不良数量：{$data3['NgNum']}
            </div>
          </div>
<!--          <div class="top11">-->
<!--            <div class="top111">首件</div>-->
<!--            <div class="top112">-->
<!--              覆盖率:-->
<!--            </div>-->
<!--          </div>-->
        </div>
        <div class="top2">
          <h3>首检清单</h3>
          <!--                表头和表体分离-->
          <div style="width: 100%;margin: 0 auto;">
            <table class="table table1">
              <tr style="text-align: center;">
                <th width="30px">序号</th>
                <th width="200px">首检单号</th>
                <th width="220px">制令单号</th>
                <th width="200px">工单号</th>
                <th width="150px">产品料号</th>
                <th width="100px">送检工序</th>
                <th width="100px">单据状态</th>
                <th width="50px">应抽数量</th>
                <th width="50px">送检数量</th>
                <th width="150px">检验结果</th>
              </tr>
            </table>
          </div>
          <div class="{if $data1['count']>=6}container{/if}">
            <div class="{if $data1['count']>=6}container1{/if}" style="animation-duration:{$data1['count']}s">
              <table class="table table1">
                {foreach $data1['data'] as $k=>$v}
                <tr style="text-align: center">
                  <td width="30px" >{$k+1}</td>
                  <td width="175px" >{$v['DOC_NO']}</td>
                  <td width="200px" >{$v['MO_NUMBER']}</td>
                  <td width="190px">{$v['PROJECT_NO']}</td>
                  <td width="150px">{$v['MODEL_CODE']}</td>
                  <td width="100px">{$v['GROUP_NAME']}</td>
                  <td width="100px">{$v['STATUS']}</td>
                  <td width="50px">{$v['FIRST_QTY']}</td>
                  <td width="50px">{$v['SEND_QTY']}</td>
                  <td width="140px">{$v['RESULT_STATUS']}</td>
                </tr>
                {/foreach}
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="divBottom">
        <div class="bottom1">
          <h3>今日IPQC巡检数据</h3>
          <!--                表头和表体分离-->
          <div style="width: 100%;margin-top: -20px;margin-bottom: -15px">
            <table class="table table1">
              <tr>
                <th width="30px">序号</th>
                <th width="150px">单据号</th>
                <th width="150px">工单号</th>
                <th width="170px">产品料号</th>
                <th width="100px">单据状态</th>
                <th width="100px">巡检区域</th>
                <th width="100px">项目名称</th>
                <th width="300px">检验内容</th>
                <th width="150px">检验结果</th>
                <th width="150px">检验时间</th>
              </tr>
            </table>
          </div>
          <div class="{if $data2['count']>=6}container2{/if}">
            <div class="{if $data2['count']>=6}container21{/if}" style="animation-duration:{$data2['count']}s">
              <table class="table table1" style="margin: 0 auto">
                {foreach $data2['data'] as $k=>$v}
                <tr style="text-align: center">
                  <td width="30px">{$k+1}</td>
                  <td width="150px">{$v['DOC_NO']}</td>
                  <td width="150px">{$v['PROJECT_NO']}</td>
                  <td width="170px">{$v['MODEL_CODE']}</td>
                  <td width="100px">{$v['STATUS']}</td>
                  <td width="100px">{$v['AREA_SN']}</td>
                  <td width="100px">{$v['TEST_ITEM_NAME']}</td>
                  <td width="300px">{$v['TEST_CONTENT']}</td>
                  <td width="150px">{$v['TEST_RESULT']}</td>
                  <td width="150px">{$v['CHECK_TIME']}</td>
                </tr>
                {/foreach}
              </table>
            </div>
          </div>

        </div>
        <div class="bottom2">
          <h3>昨日IPQC巡检数据</h3>
          <!--                表头和表体分离-->
          <div style="width: 100%;margin-top: -20px;margin-bottom: -15px">
            <table class="table table1">
              <tr>
                <th width="30px">序号</th>
                <th width="150px">单据号</th>
                <th width="150px">工单号</th>
                <th width="170px">产品料号</th>
                <th width="100px">单据状态</th>
                <th width="100px">巡检区域</th>
                <th width="100px">项目名称</th>
                <th width="300px">检验内容</th>
                <th width="150px">检验结果</th>
                <th width="150px">检验时间</th>
              </tr>
            </table>
          </div>
          <div class="{if $data3['count']>=6}container2{/if}">
            <div class="{if $data3['count']>=6}container21{/if}" style="animation-duration:{$data3['count']*2}s">
              <table class="table table1" style="margin: 0 auto">
                {foreach $data3['data'] as $k=>$v}
                <tr style="text-align: center">
                  <td width="30px">{$k+1}</td>
                  <td width="150px">{$v['DOC_NO']}</td>
                  <td width="150px">{$v['PROJECT_NO']}</td>
                  <td width="170px">{$v['MODEL_CODE']}</td>
                  <td width="100px">{$v['STATUS']}</td>
                  <td width="100px">{$v['AREA_SN']}</td>
                  <td width="100px">{$v['TEST_ITEM_NAME']}</td>
                  <td width="300px">{$v['TEST_CONTENT']}</td>
                  <td width="150px">{$v['TEST_RESULT']}</td>
                  <td width="150px">{$v['CHECK_TIME']}</td>
                </tr>
                {/foreach}
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  setInterval(function() {
    location.reload(); // 刷新页面
  },20000)
  $(".return").click(function (){
    window.history.back();
  })
</script>
</html>